<template>
  <ScrollWrapper>
    <div class="container">
      <div class="container-content">
        <!-- 页面头部 -->
        <div class="header">
          <h2 class="title"></h2>
          <div class="actions">
            <a-button class="sync-btn" @click="handleSync">同步</a-button>
            <a-button type="primary" class="add-btn" @click="handleAdd">添加</a-button>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
          <a-table
              :columns="columns"
              :data-source="dataSource"
              :pagination="false"
              :scroll="{ x: 1200 }"
              class="department-table pagination-container"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                <FormOutlined class="edit-icon" :class="record.status === 0 ? 'able':'disable'"/>
              </template>
              <template v-if="column.key === 'status'">
                <div :class="record.status === 0 ? 'tagAble':'tagDisable'">{{ record.status === 0 ? "正常" : "作废" }}
                </div>
              </template>
              <template v-if="column.key === 'link'">
                <div class="link" :class="record.status === 0 ? 'able':'disable'" @click="open=true">
                  <svg t="1754803813412" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="1481" width="16" height="16">
                    <path
                        d="M70.136424 953.6091a21.503664 21.503664 0 0 1-6.143904-15.247762c0.183997-10.751832 3.143951-106.470336 53.655162-156.997547 23.303636-23.311636 72.102873-48.559241 143.885752-84.48668 76.606803-38.279402 119.086139-61.111045 138.661833-79.622756l43.167326-40.815362-37.503414-46.07928c-59.071077-72.574866-92.966547-152.717614-92.966548-219.852565 0-51.783191 0-110.470274 24.503617-159.013515C366.72379 93.43854 425.450872 63.999 512.00152 63.999c86.526648 0 145.28573 29.43954 174.589272 87.486633 24.503617 48.559241 24.503617 107.246324 24.503617 159.029515 0 67.126951-33.89547 147.261699-92.990547 219.852565l-37.503414 46.09528 43.199325 40.831362c11.687817 11.047827 31.831503 23.751629 62.383026 40.31137l47.287261-47.279261c-28.919548-15.183763-56.167122-30.511523-65.710974-39.543382 67.926939-83.470696 107.326323-177.733223 107.326323-260.259934 0-55.999125 0-125.702036-31.34351-187.853065C715.478341 66.702958 652.351327 0 512.00152 0 371.635713 0 308.5087 66.702958 280.269141 122.654084c-31.38351 62.159029-31.38351 131.83794-31.38351 187.853064 0 82.54271 39.399384 176.797238 107.334323 260.259934-16.223747 15.34376-83.110701 48.783238-123.302073 68.854924-79.718754 39.871377-130.293964 66.230965-160.525492 96.486492C5.425435 803.075452 0.361515 915.481696 0.01752 937.353354a85.430665 85.430665 0 0 0 24.519617 61.183044 85.438665 85.438665 0 0 0 60.79105 25.439602h362.426337v-63.999H85.328187a21.359666 21.359666 0 0 1-15.191763-6.3679z m899.649943-195.556945l-45.975281 45.967282c26.943579 42.527336 35.663443 101.622412 36.167434 134.309902a21.383666 21.383666 0 0 1-6.095904 15.279761 21.199669 21.199669 0 0 1-15.223762 6.3759H767.813523l-64.007 63.999h234.844331c22.879643 0 44.767301-9.183857 60.79905-25.439602a85.542663 85.542663 0 0 0 24.535616-61.215044c-0.311995-19.623693-4.847924-112.062249-54.199153-179.277199z m35.319448-91.558569a63.967001 63.967001 0 0 0 0-90.502586l-45.255293-45.247293A63.799003 63.799003 0 0 0 914.59523 511.992a63.767004 63.767004 0 0 0-45.255293 18.751707l-274.819706 274.747707c-12.487805 12.503805-50.727207 60.839049-50.743207 77.214794L511.769524 1023.984l141.269792-31.9995s64.766988-38.247402 77.262793-50.751207l274.803706-274.739707z m-328.842861 273.707723l-82.918705-82.902704c8.503867-11.655818 17.967719-23.375635 23.799628-29.183544l206.932767-206.868768 90.510586 90.502586-206.844768 206.796769c-3.623943 3.439946-16.167747 11.911814-31.479508 21.655661z"
                        fill="" p-id="1482"></path>
                  </svg>
                  <span>关联用户</span>
                </div>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <a-modal v-model:visible="open" :footer="null" :closable="false">
      <div class="modal-content">
        <div>
          <div style="font-size: 12px;color:#777;margin-bottom: 5px">关联部门/成员</div>
          <a-input-search v-model:value="modalSearchValue" style="margin-bottom: 8px" placeholder="Search"/>
          <a-tree
              class="tree"
              checkable
              :defaultExpandAll="true"
              :tree-data="treeData"
          >
          </a-tree>
        </div>
        <div class="modal-input-container">
          <div class="title">占比设置</div>
          <a-input-number v-for="item of 7" placeholder="请输入占比小数" class="input"></a-input-number>
        </div>
      </div>
    </a-modal>
  </ScrollWrapper>
</template>

<script>
import ScrollWrapper from "@/components/ScrollWrapper/ScrollWrapper.vue";
import {message} from 'ant-design-vue';
import {FormOutlined} from '@ant-design/icons-vue';
import help from "@/utils/help.js";
import api from "@/api/index.js";

export default {
  components: {
    ScrollWrapper,
    FormOutlined
  },
  name: "TagManage",
  data() {
    return {
      loading: false,
      modalSearchValue: "",
      treeData: [
        {
          title: '市场部',
          key: '1',
          children: [
            {
              title: 'Alex',
              key: '2',
            },
            {
              title: 'Yuette',
              key: '3',
            },
          ],
        },
        {
          title: '出运中心',
          key: '4',
          children: [
            {
              title: 'Hazel',
              key: '5',
            },
          ],
        },
        {
          title: '财务',
          key: '6',
          children: [
            {
              title: 'Annie',
              key: '7',
            },
          ],
        },
      ],
      open: false,
      currentPage: 1,
      pageSize: 10,
      total: 40,
      columns: [
        {
          title: '标签ID',
          dataIndex: 'tagId',
          key: 'tagId',
          align: 'center'
        },
        {
          title: '标签名称',
          dataIndex: 'tagName',
          key: 'tagName',
          align: 'center'
        },
        {
          title: '默认可用占比',
          dataIndex: 'proportion',
          key: 'proportion',
          align: 'center'
        },
        {
          title: '关联成员',
          dataIndex: 'link',
          key: 'link',
          align: 'center'
        },
        {
          title: "状态",
          dataIndex: 'status',
          key: 'status',
        },
        {
          title: '编辑',
          key: 'action',
          align: 'center'
        }
      ],
      dataSource: []
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      try {
        let result = await api.getTagByCon({
          "tagid": "",
          "tagName": ""
        });
        this.dataSource = result;
      } catch (e) {
        help.showError(e);
      } finally {
        this.loading = false;
      }
    },
    handleSync() {
      message.success('同步成功');
    },
    handleAdd() {
      message.info('添加部门');
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep(.tree .ant-tree-treenode) {
  padding: 6px 0px;
}

.modal-content {
  display: flex;
  padding: 20px 20px;
  height: 300px;
  width: 100%;
  border-radius: 10px;
  overflow-y: auto;
}

.modal-input-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 40px;

  .title {
    font-size: 12px;
    color: #777;
    margin-top: 40px;
  }

  .input {
    width: 100%;
    margin-top: 6px
  }
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 20px 24px 0;
  box-sizing: border-box;
}

.container-content {
  background-color: #fff;
  display: flex;
  margin-top: 20px;
  flex-direction: column;
  border-radius: 30px;
  flex: 1;
  padding: 24px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;

  .title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .actions {
    display: flex;
    gap: 12px;
    margin: 0 30px;

    .sync-btn {
      color: #3a7c5a;
      font-weight: 400;
      border-radius: 6px;
      width: 110px;
      border-color: #3a7c5a;

      &:hover {
        opacity: 0.6;
      }
    }

    .add-btn {
      background-color: #3a7c5a;
      border-radius: 6px;
      width: 110px;

      &:hover {
        opacity: 0.6;
      }
    }
  }
}

.table-container {
  flex: 1;
  margin-bottom: 24px;

  :deep(.department-table) {
    .ant-table-thead > tr > th {
      background-color: #fff;
      font-weight: 500;
      color: #666;
      border-bottom: 1px solid #f0f0f0;
      padding: 16px 8px;
    }

    .ant-table-tbody > tr > td {
      padding: 16px 8px;
      border-bottom: 1px solid #f0f0f0;
      color: #333;
    }

    .ant-table-tbody > tr:hover > td {
      background-color: #f5f5f5;
    }

    .ant-table-cell:before {
      width: 0 !important;
    }

    .ant-table-thead > tr > .ant-table-cell {
      color: #d9d9d9;
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;

    .detail-btn {
      background-color: #fff;
      border: 1px solid #3a7c5a;
      color: #3a7c5a;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .enable-btn {
      background-color: #3a7c5a;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        opacity: 0.6;
      }
    }

    .disable-btn {
      background-color: #ff4d4f;
      border-color: #ff4d4f;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      width: 80px;

      &:hover {
        background-color: #ff7875;
        border-color: #ff7875;
      }
    }
  }
}

.pagination-container {
  :deep(.ant-pagination) {
    .ant-pagination-item {
      border-radius: 4px;

      &.ant-pagination-item-active {
        background-color: #3a7c5a;
        border-color: #3a7c5a;

        a {
          color: #fff;
        }
      }
    }

    .ant-pagination-prev,
    .ant-pagination-next {
      border-radius: 4px;

      &:hover {
        border-color: #3a7c5a;
        color: #3a7c5a;
      }
    }
  }
}

:deep(.ant-tag) {
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;

  &.ant-tag-green {
    background-color: #f6ffed;
    border-color: #b7eb8f;
    color: #52c41a;
  }

  &.ant-tag-orange {
    background-color: #fff7e6;
    border-color: #ffd591;
    color: #fa8c16;
  }
}

.edit-icon {
  color: #3a8c3a;
  font-size: 16px;

  &:hover {
    opacity: 0.6;
    cursor: pointer;
  }
;
}

.link {
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    margin-right: 4px;
  }

  &:hover {
    opacity: 0.6;
    cursor: pointer;
  }
}

.disable {
  color: #777;
}

.able {
  color: #104533;
}

.tagAble {
  background-color: #b0cb4a;
  color: #457b45;
  height: 24px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.tagDisable {
  background-color: #d6d6d6;
  color: #767676;
  height: 24px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

}


</style>